Draw a 150*100 pixels rectangle:
JavaScript:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the rect() method.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
The rect() method creates a rectangle.
Tip: Use the stroke() or the fill() method to actually draw the rectangle on the canvas.
JavaScript syntax: | context.rect(x,y,width,height); |
---|
Parameter | Description | Play it |
---|---|---|
x | The x-coordinate of the upper-left corner of the rectangle | Play it » |
y | The y-coordinate of the upper-left corner of the rectangle | Play it » |
width | The width of the rectangle, in pixels | Play it » |
height | The height of the rectangle, in pixels | Play it » |
Create three rectangles with the rect() method:
JavaScript: